<template>
  <div class="i_bg">
    <div class="content mar_20">
      <img src="@/assets/images/img3.jpg" />
    </div>

    <!--Begin 第三步：提交订单 Begin -->
    <div class="content mar_20">
      <!--Begin 支付 Begin -->
      <div class="warning">
        <table
          border="0"
          style="width: 1000px; text-align: center"
          cellspacing="0"
          cellpadding="0"
        >
          <tr height="35">
            <td style="font-size: 18px">
              感谢您在本店购物！您的订单已提交成功，请记住您的订单号:
              <font color="#ff4e00" v-if="order && order.serialNumber">{{
                order.serialNumber
              }}</font>
            </td>
          </tr>
          <br /><br />
          <!-- <tr>
            <td
              style="
                font-size: 14px;
                font-family: '宋体';
                padding: 10px 0 20px 0;
                border-bottom: 1px solid #b6b6b6;
              "
            >
              您选定的配送方式为: <font color="#ff4e00">申通快递</font>； &nbsp;
              &nbsp;您选定的支付方式为: <font color="#ff4e00">银行卡</font>；
              &nbsp; &nbsp;您的应付款金额为:
              <font color="#ff4e00">￥888.00</font>
            </td>
          </tr> -->
          <!--           <tr>
            <td style="padding: 20px 0 30px 0; font-family: '宋体'">
              支付宝网站(www.alipay.com) 是国内先进的网上支付平台。<br />
              支付宝收款接口：在线即可开通，零预付，免年费，单笔阶梯费率，无流量限制。<br />
              <a href="#" style="color: #ff4e00">立即在线申请</a>
            </td>
          </tr> -->
          <tr>
            <td>
              <div
                class="btn_u"
                style="margin: 0 auto; padding: 0 20px; width: 120px"
              >
                <a href="javascript:;" @click="alipay()">支付宝支付</a>
              </div>
              <br />
              <div
                class="btn_u"
                style="margin: 0 auto; padding: 0 20px; width: 120px"
              >
                <a href="javascript:;" @click="wxpay()">微信支付</a>
              </div>
              <br /><br />
              <router-link :to="{name: 'IndexCenter'}">首页</router-link> &nbsp; &nbsp; <router-link :to="{name: 'SelfOrderList'}">查看订单</router-link>
            </td>
          </tr>
          <br /><br />
        </table>
      </div>
      <!--Begin 支付宝支付 Begin -->

      <!--Begin 余额不足 Begin -->
      <!-- <div class="warning">
        <table
          border="0"
          style="width: 1000px; text-align: center"
          cellspacing="0"
          cellpadding="0"
        >
          <tr>
            <td>
              <p style="font-size: 22px">提示 !</p>
              <b style="color: #ff4e00; font-size: 16px; font-family: '宋体'"
                >您的余额不足以支付整个订单，请选择其他支付方式</b
              >
              <div class="backs"><a href="#">返回上一页</a></div>
            </td>
          </tr>
        </table>
      </div> -->
      <!--Begin 余额不足 Begin -->
    </div>
    <!--End 第三步：提交订单 End-->
  </div>
</template>

<script>

import QRCode from 'qrcode'
export default {
    data() {
      return {
        order: null,
      }
    },
    methods: {
      getEasyOrder() { //获取订单
        this.$axios({
          url: '/api/order/easy',
          method: 'post',
          data: {
            id: this.order.id,
          }
        }).then(rs => {
          this.order = rs.data.order
          if(this.order.isPay == 1) {
            this.$router.push({
              name: 'IndexCenter'
            })
          }
        })
      },
      alipay() {
        if(this.order.isPay == -1) {
          this.$message.info("本次订单已关闭")
          return
        }
        if(this.order.isPay == 1) {
          this.$message.info("本次订单已支付")
          return
        }
        this.$axios({
          url: '/api/alipay/zf',
          method: 'post',
          data: this.order
        }).then(rs => {
          // 新窗口打开支付页面
          const newWindow = window.open('', '_blank');
          newWindow.document.write(rs.data);
        })
      },
      wxpay() {
        if(this.order.isPay == -1) {
          this.$message.info("本次订单已关闭");
          return
        }
        if(this.order.isPay == 1) {
          this.$message.info("本次订单已支付")
          return
        }
        this.$axios({
          url: '/api/wx/zf',
          method: 'post',
          data: this.order
        }).then(rs => {
          let url = rs.data.pay_url;
          console.log(url);
          QRCode.toDataURL(url)
            .then(imgUrl => {
              let html = `<html><body><div style="text-align:center;padding:10rem"><img style="display:block;margin:0px auto" src='${imgUrl}'><h2>请打开微信扫一扫支付</h2></div></body></html>`
              const newWindow = window.open('', '_blank');
              newWindow.document.write(html);
            })
            .catch(err => {
              console.error(err)
            })
        })
      }
    },
    props: ['payStatus'],
    created() {
      let type = sessionStorage.getItem("type");
      if(!type) {
        this.$message.error("权限不足，将回到首页！")
        this.$router.push({
          name: 'IndexCenter'
        })
        return;
      }
      this.order = this.$store.state.order;
      this.getEasyOrder();
    },
}
</script>

<style>
</style>